<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            height: 100%;
        }
        #app{
            border: 5px solid rgba(245, 139, 74, 0.853);
            background-color: rgba(255, 194, 12, 0.582);
            border-radius: 30px 30px 0 0;
            height: 100%;
        }
        .title{
            line-height: 40px;
            font-weight: bold;
            text-align: center;
        }
       
        .list .item{
            display: flex;
            justify-content: space-around;
            align-items: center;
            margin: 20px;
            height: 80px;
            background-color: #fff;
            border-radius: 5px;
            box-shadow: 5px 5px 3px 3px rgba(255, 123, 0, 0.864);
        }
        .list .item img{
            width: 60px;
            height: 60px;
            border-radius: 50%;
        }
        .desc{
            color: red
        }
    </style>
</head>
<body>
    
    <!-- 由于Vue实例对象挂载到#app表示的dom节点上，所以Vue实例对象身上定义的数据和方法就可以在这个dom节点内部使用（在dom节点外部不可以使用） -->
    <div id="app">
        <div class="title">任务列表</div>
        <div class="list">
            <div class="item" v-for="(item,index) in tasklist" v-bind:key="index">
                <div class="left">
                    <img :src="item.pic">
                </div>
                <div class="middle">
                    <div class="name">{{item.name}}</div>
                    <div class="desc">{{item.desc}}</div>
                </div>
                <div class="right">
                    <button>{{item.status == 1 ? '已完成' : item.status == 2 ? "领取" :"已领取"}}</button>
                </div>
            </div>
        </div>
    </div>
    <!-- 这个js文件对外暴露了一个Vue构造函数，我们可以使用Vue构造函数实例化Vue对象 -->
    <script src="./vue-2.5.21.js"></script>
    <script>
        //实例化对象
        var v = new Vue({
            //这个位置放置Vuejs规定的一些选项（这些选项的名字是固定的，另外这些选项是可选的）
            el:"#app",//el Vue实例挂载的dom节点
            data:{
                tasklist:[
                    {id:1,pic:'./images/4.jpg',name:"咪咕视频送流量",desc:'每月领500MB流量',status:1},
                    {id:2,pic:'./images/5.jpg',name:"咪咕视频送福利",desc:'每月领800MB流量',status:2},
                    {id:3,pic:'./images/6.jpg',name:"最高40元套餐折扣卷",desc:'每月领1500MB流量',status:3},
                    {id:4,pic:'./images/7.jpg',name:"咪咕视频送超级秒杀",desc:'每月领5500MB流量',status:1}
                ]
            },//data 定义响应式数据，data的类型可以是对象，也可以是函数
            //data:function(){return{}},//使用函数的写法，可以在实例化对象时生成一个新的数据
            computed(){},//computed 定义计算属性
            watch:{},//watch 定义数据监听
            methods:{},//methods 定义方法（函数）
            filters:{},//filters 定义过滤器
            directives:{},//directives 定义自定义指令
            components:{},//components 注册局部组件
        })

        //接下来使用vueJS的声明式编程语法，实现<数据驱动视图更新>
    </script>
</body>
</html>